import { Button, Form } from '@nutui/nutui-react-taro'
import { Text, View } from '@tarojs/components'
import React from 'react'
import AddressSelect from '../../components/address-select'
import DateTimePicker from '../../components/date-time-picker'
import Layout from '../../components/layout'
import ProductCard from '../../components/product-card'
import './index.less'

interface Package {
  id: string
  name: string
  price: string
  image: string
}

const QuickAppointment: React.FC = () => {
  const [form] = Form.useForm()
  const selectedPackages = Form.useWatch('selectedPackages', form)

  const initialPackages: Package[] = [
    {
      id: 'kitchen',
      name: '厨房改造',
      price: '¥12,888 起',
      image: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=400&h=300&fit=crop&crop=center',
    },
    {
      id: 'bathroom',
      name: '卫生间改造',
      price: '¥8,888 起',
      image: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=400&h=300&fit=crop&crop=center',
    },
    {
      id: 'livingroom',
      name: '客厅改造',
      price: '¥15,888 起',
      image: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=400&h=300&fit=crop&crop=center',
    },
    {
      id: 'bedroom',
      name: '卧室改造',
      price: '¥10,888 起',
      image: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=400&h=300&fit=crop&crop=center',
    },
  ]

  // 地址选择器数据
  const defaultOptions = [
    {
      id: 1,
      addressDetail: 'xxxx小区',
      cityName: '次渠镇',
      countyName: '',
      provinceName: '北京市',
      townName: 'xxxx街道',
      name: '探探鱼1',
      phone: '182****1718',
    },
    {
      id: 2,
      addressDetail: 'xxxx小区',
      cityName: '钓鱼岛全区',
      countyName: '',
      provinceName: '钓鱼岛',
      townName: 'xxxx街道',
      name: '探探鱼2',
      phone: '182****1718',
    },
    {
      id: 3,
      addressDetail: '京东大厦',
      cityName: '大兴区',
      countyName: '科创十一街18号院',
      provinceName: '北京市',
      townName: 'xxxx街道',
      name: '探探鱼3',
      phone: '182****1718',
    },
  ]

  const dateTimeOptions = [
    {
      value: '20230520',
      text: '5月20日(今天)',
      children: [
        { value: '09', text: '09:00-10:00' },
        { value: '10', text: '10:00-11:00' },
        { value: '11', text: '11:00-12:00' },
      ],
    },
    {
      value: '20230521',
      text: '5月21日(星期三)',
      children: [
        { value: '09', text: '09:00-10:00' },
        { value: '10', text: '10:00-11:00' },
      ],
    },
  ]

  return (
    <Layout
      title='快速预约'
      showTabBar={false}
      footer={
        <Button
          block
          type='primary'
          onClick={() => {
            form.submit()
          }}>
          确认预约(已选{selectedPackages?.length}个套餐)
        </Button>
      }>
      <View className='page-content'>
        <Form
          initialValues={{
            address: defaultOptions[1],
            selectedTime: {
              value: dateTimeOptions[1].value,
              children: [dateTimeOptions[1].children[1]],
            },
            selectedPackages: [initialPackages[0].id],
          }}
          form={form}
          onFinish={(values) => {
            console.log(1111, values)
            // TODO: 提交订单
          }}
          divider>
          {/* 地址选择 */}
          <View className='form-header'>
            <Text>选择地址</Text>
          </View>
          <Form.Item name='selectedAddress' noStyle>
            <AddressSelect options={defaultOptions} />
          </Form.Item>

          {/* 时间选择 */}
          <View className='form-header'>
            <Text>选择时间</Text>
          </View>
          <Form.Item name='selectedTime' noStyle>
            <DateTimePicker options={dateTimeOptions} />
          </Form.Item>

          {/* 套餐选择 */}
          <View className='form-header'>
            <Text>装修项目</Text>
            <Text className='form-header-desc'>请选择您的 装修项目</Text>
          </View>
          <Form.Item name='selectedPackages' noStyle>
            <ProductCard options={initialPackages} />
          </Form.Item>
        </Form>
      </View>
    </Layout>
  )
}

export default QuickAppointment
